<template>
  <div>
    <!-- :style="{cssPropertyName: cssPropertyValue}" -->
    <!-- 1.基本用法 -->
    <div :style="{ color: finalColor, 'font-size': '16px' }">v-bind绑定style-对象语法</div>
    <div :style="{ color: finalColor, fontSize: '16px' }">v-bind绑定style-对象语法</div>
    <div :style="{ color: finalColor, fontSize: finalFontSize + 'px' }">
      v-bind绑定style-对象语法
    </div>

    <!-- 2.绑定一个data中的属性值, 并且是一个对象 -->
    <div :style="finalStyleObj">绑定一个data中的属性</div>
    <!-- 3.绑定调用methods方法返回的对象 -->
    <div :style="getFinalStyleObj()">methods方法返回的对象</div>
    <hr />
    <h2>v-bind绑定style-数组语法</h2>
    <div :style="[{ color: 'green', fontSize: '15px' }]">v-bind绑定style-数组语法</div>

    <div :style="[style1Obj, style2Obj]">v-bind绑定style-数组语法</div>
  </div>
</template>

<!-- <script>
export default {
  name: 'vbindstyle',
  data() {
    return {
      finalColor: 'red',
      finalFontSize: 16,
      finalStyleObj: {
        'font-size': '14px',
        'font-weight': 900,
        backgroundColor: '#ddd'
      },
      style1Obj: {
        color: 'red',
        fontSize: '16px'
      },
      style2Obj: {
        textDecoration: 'underline'
      }
    }
  },
  methods: {
    getFinalStyleObj() {
      return {
        'font-size': '16px',
        fontWeight: 700,
        backgroundColor: '#ddd'
      }
    }
  }
}
</script> -->

<script setup>
defineOptions({
  name: 'vbindstyle'
})
import { ref, reactive } from 'vue'
const finalColor = ref('red')
const finalFontSize = ref(16)
const finalStyleObj = reactive({
  'font-size': '14px',
  'font-weight': 900,
  backgroundColor: '#ddd'
})

const style1Obj = reactive({
  color: 'red',
  fontSize: '16px'
})

const style2Obj = reactive({
  textDecoration: 'underline'
})

// 方法
const getFinalStyleObj = () => {
  return {
    'font-size': '16px',
    fontWeight: 700,
    backgroundColor: '#ddd'
  }
}
</script>

<style lang="scss" scoped></style>
